$search-icon-size: 1rem;

.search {
  margin-left: auto;
  margin-right: 2rem;
  max-width: 20rem;
  position: relative;
  width: 100%;
}

.search__input {
  border-radius: 100rem;
  padding-left: $search-icon-size * 2.5;
  padding-right: $search-icon-size * 2.5;
}

.search__eyeglass-icon {
  height: $search-icon-size;
  left: $search-icon-size;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: $search-icon-size;
}

.search__clear-link {
  height: $search-icon-size;
  position: absolute;
  right: $search-icon-size * 0.75;
  top: 50%;
  transform: translateY(-50%);
  width: $search-icon-size;
}

.search__clear-icon {
  color: $grey-5;
  height: $search-icon-size;
  position: absolute;
  transition: fill $base-duration $base-timing;
  width: $search-icon-size;

  &:hover {
    color: $action-color;
  }
}

.search__tooltip {
  anchor-name: --tooltip-anchor;
  margin-right: 2rem;

  svg {
    color: $grey-5;
    height: 24px;
    width: 24px;

    &:hover {
      color: $action-color;
    }
  }
}

.search__tooltip-popover {
  background-color: $blue;
  border-color: $blue;
  border-radius: $base-border-radius;
  color: $white;
  padding: 2rem;
  width: max-content;
}


/* We can remove this stylelint disable (and the css-anchor-positioning polyfill)
   when position-anchor becomes widely available */

/* stylelint-disable property-no-unknown */
.search__tooltip-popover-positioning {
  left: anchor(right);
  margin: 1rem;
  position: fixed;
  position-anchor: --tooltip-anchor;
  top: anchor(bottom);
  transform: translateX(-100%);
}

.search__tooltip-popover-value {
  opacity: 0.5;
}
